import React from 'react';
// 组件
import { Content, Card, Row, Col } from 'react-fule-ui';
// 代码块
import CMarkdown from './../../components/CMarkdown';
// 数据
import { Demo } from './demo.js';
import { urlDataMy, urlDataAi } from './urlData.js';

import './index.scss';

export default function FuleStart() {
  const toLink = (data) => {
    window.open(data)
  }
  return (
    <Content>
      <Content.Header>欢迎使用</Content.Header>
      <Content.Body>
        <Card>
          <Card.Header>快速安装：</Card.Header>
          <Card.Body>
            <CMarkdown data={Demo} />
          </Card.Body>
        </Card>
        <Card>
          <Card.Header>我的链接</Card.Header>
          <Card.Body>
            <Row gutter={[20, 20]}>
              {urlDataMy.map((item, index) => (
                <Col colSpan={6} phone={12} key={index}>
                  <Card className='fule-start__urldata' onClick={() => toLink(item.url)}>
                    <Card.Body className='fule-start__urldata-inner'>
                      <img src={item.img} alt='logo' className='fule-start__urldata-img' />
                      <div className='fule-start__urldata-title'>{item.title}</div>
                    </Card.Body>
                  </Card>
                </Col>
              ))}
            </Row>
          </Card.Body>
        </Card>
        <Card>
          <Card.Header>AI链接</Card.Header>
          <Card.Body>
            <Row gutter={[20, 20]}>
              {urlDataAi.map((item, index) => (
                <Col colSpan={6} phone={12} key={index}>
                  <Card className='fule-start__urldata' onClick={() => toLink(item.url)}>
                    <Card.Body className='fule-start__urldata-inner'>
                      <img src={item.img} alt='logo' className='fule-start__urldata-img' />
                      <div className='fule-start__urldata-title' title={item.title}>{item.title}</div>
                    </Card.Body>
                  </Card>
                </Col>
              ))}
            </Row>
          </Card.Body>
        </Card>
      </Content.Body>
    </Content>
  );
}
